<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" integrity="sha384-WskhaSGFgHYWDcbwN70/dfYBj47jz9qbsMId/iRN3ewGhXQFZCSftd1LZCfmhktB"
        crossorigin="anonymous">

    <title>Bootstrap Sandbox</title>
</head>

<body>
    <header>
        <h1 class="display-3 text-center my-4">Floats & Fixed Positions</h1>
        <div class="container">
            <div class="row">
                <div class="col-md-3">
                    <div class="dropdown">
                        <button class="btn btn-primary btn-block dropdown-toggle" type="button" data-toggle="dropdown">
                            2: Utilities
                        </button>
                        <div class="dropdown-menu">
                            <a class="dropdown-item" href="2_2_basic_typography.html">2.2 Basic Typography</a>
                            <a class="dropdown-item" href="2_3_text_alignment_display.html">2.3 Text Alignment & Display</a>
                            <a class="dropdown-item" href="2_4_floats_position.html">2.4 Floats & Position</a>
                            <a class="dropdown-item" href="2_5_colors_background.html">2.5: Colors & Background</a>
                            <a class="dropdown-item" href="2_6_spacing.html">2.6 Spacing</a>
                            <a class="dropdown-item" href="2_7_sizing.html">2.7 Sizing</a>
                            <a class="dropdown-item" href="2_8_breakpoints.html">2.8 Breakpoints</a>
                        </div>
                    </div>
                </div>
                <div class="col-md-3">
                    <div class="dropdown">
                        <button class="btn btn-success btn-block dropdown-toggle" type="button" data-toggle="dropdown">
                            3: CSS Components
                        </button>
                        <div class="dropdown-menu">
                            <a class="dropdown-item" href="3_2_buttons.html">3.2 Buttons</a>
                            <a class="dropdown-item" href="3_3_navbar.html">3.3 Navbar</a>
                            <a class="dropdown-item" href="3_4_list_groups_badges.html">3.4 List Groups & Badges</a>
                            <a class="dropdown-item" href="3_5_forms.html">3.5 Forms</a>
                            <a class="dropdown-item" href="3_6_input_groups.html">3.6 Input Groups</a>
                            <a class="dropdown-item" href="3_7_alerts_progress.html">3.7 Alerts & Progress</a>
                            <a class="dropdown-item" href="3_8_tables_pagination.html">3.8 Tables & Pagination</a>
                            <a class="dropdown-item" href="3_9_cards.html">3.9 Cards</a>
                            <a class="dropdown-item" href="3_10_media_object.html">3.10 Media Objects</a>
                            <a class="dropdown-item" href="3_11_jumbotron.html">3.11 Jumbotron</a>
                        </div>
                    </div>
                </div>
                <div class="col-md-3">
                    <div class="dropdown">
                        <button class="btn btn-warning btn-block dropdown-toggle" type="button" data-toggle="dropdown">
                            4: Grid & Flexbox
                        </button>
                        <div class="dropdown-menu">
                            <a class="dropdown-item" href="4_2_grid_system.html">4.2 Grid System</a>
                            <a class="dropdown-item" href="4_3_grid_alignment.html">4.3 Grid Alignment</a>
                            <a class="dropdown-item" href="4_4_flexbox.html">4.4 Flexbox</a>
                            <a class="dropdown-item" href="4_5_auto_margins_wrapping_order.html">4.5 Auto Margins & Wrap</a>
                        </div>
                    </div>
                </div>
                <div class="col-md-3">
                    <div class="dropdown">
                        <button class="btn btn-danger btn-block dropdown-toggle" type="button" data-toggle="dropdown">
                            5: JavaScript Widgets
                        </button>
                        <div class="dropdown-menu">
                            <a class="dropdown-item" href="5_2_carousel.html">5.2 Carousel</a>
                            <a class="dropdown-item" href="5_3_collapse.html">5.3 Collapse</a>
                            <a class="dropdown-item" href="5_4_tooltips.html">5.4 Tooltips</a>
                            <a class="dropdown-item" href="5_5_popovers.html">5.5 Popovers</a>
                            <a class="dropdown-item" href="5_6_modals.html">5.6 Modals</a>
                            <a class="dropdown-item" href="5_7_scrollspy.html">5.7 ScrollSpy</a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <hr>
    </header>

    <div class="container">
        <!--##################START HERE###################-->

        <!-- FLOATS -->
        <div class="float-left">Float left</div>
        <br>
        <div class="float-right">Float right</div>
        <br>
        <div class="float-none">Float none</div>
        <br>

        <!-- RESPONSIVE FLOATS -->
        <div class="float-sm-right">Float right on small or wider</div>
        <br>
        <div class="float-md-right">Float right on medium or wider</div>
        <br>
        <div class="float-lg-right">Float right on large or wider</div>
        <br>
        <div class="float-xl-right">Float right on extra large or wider</div>
        <br>

        <div class="float-sm-left">Float left on small or wider</div>
        <br>
        <div class="float-md-left">Float left on medium or wider</div>
        <br>
        <div class="float-lg-left">Float left on large or wider</div>
        <br>
        <div class="float-xl-left">Float left on extra large or wider</div>
        <br>

        <div class="float-sm-none">Float none on small or wider</div>
        <br>
        <div class="float-md-none">Float none on medium or wider</div>
        <br>
        <div class="float-lg-none">Float none on large or wider</div>
        <br>
        <div class="float-xl-none">Float none on extra large or wider</div>
        <br>

        <br>
        <br>

        <!-- CLEARFIX -->
        <div class="bg-success clearfix">
            <button class="float-left">Float Left</button>
            <button class="float-right">Float Right</button>
        </div>

        <!-- FIXED TOP -->
        <h3 class="fixed-top">Fixed Top</h3>

        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quae iure natus, fuga provident molestias, voluptates molestiae
            aperiam sit dicta a assumenda nesciunt quos adipisci reprehenderit animi ipsum unde quasi nobis veniam, modi.
            Fuga natus harum, maxime corporis rerum, maiores delectus aliquam aut quo incidunt dignissimos temporibus? Vitae
            dolorem accusamus voluptatibus illo aut nam praesentium obcaecati quaerat cupiditate distinctio tempora eius
            esse fuga, repellat fugit harum quia nihil sit in debitis expedita. Eos, voluptates eum rem voluptatum tempore
            accusamus soluta enim, animi in voluptatibus aliquam distinctio totam repudiandae necessitatibus quidem consequatur
            incidunt aliquid ad! Inventore ratione, consequatur eligendi iusto esse iure officia praesentium magni in! Nemo
            tempora, voluptatem facilis reprehenderit minima reiciendis alias similique est rem debitis id expedita voluptatum
            porro fugiat magni inventore neque. </p>

        <!-- FIXED STICKY -->
        <h3 class="sticky-top">Sticky</h3>

        <p>Est molestias sunt quae quibusdam sequi odit, iusto expedita tempore aspernatur ipsum, necessitatibus rerum debitis,
            harum, voluptatibus dolorem. Reprehenderit ex aperiam tempore. Cumque ut iste ullam non pariatur, qui architecto,
            commodi illo praesentium debitis similique, molestiae harum distinctio inventore incidunt enim atque repudiandae
            eius molestias exercitationem tempore odio dignissimos iusto officia. Libero quasi dicta quos est eveniet magni
            deserunt aut vero id ad, incidunt nostrum provident tempora modi placeat voluptatem, quod excepturi ipsam aspernatur
            necessitatibus molestias possimus veritatis sequi. Minus ducimus maiores debitis, nulla magni eum ratione numquam
            deleniti sunt et dolorum necessitatibus cumque fugit libero recusandae impedit, quaerat, nemo. Vel temporibus
            amet alias mollitia aspernatur error sint, doloremque, porro blanditiis quia atque ratione reiciendis, praesentium
            sed doloribus excepturi. Eius tenetur quis veniam enim atque fugit, a itaque dignissimos iusto, tempore fugiat
            minima libero quasi exercitationem corrupti nam sequi, doloremque quae repudiandae quisquam iure nisi totam consectetur.
            Corrupti corporis doloribus dolore iusto perspiciatis ipsum, enim sapiente nobis ullam delectus aperiam eaque
            harum sequi porro! Reprehenderit hic dolores repellat deleniti, illo nostrum nam at odio quasi quis eaque asperiores
            culpa doloremque ad velit ullam ratione omnis quae adipisci autem necessitatibus. Quod nam non maiores assumenda
            quae eius nobis cum suscipit, optio aliquid beatae modi tempora delectus voluptatibus debitis earum natus amet
            libero itaque quasi expedita, maxime repudiandae! Repudiandae sunt similique eum, provident deserunt vitae. Maxime
            nostrum, nemo quia eius rerum quas recusandae. Molestiae ullam dignissimos illo eum necessitatibus culpa ea,
            distinctio maiores molestias aliquam, eligendi soluta cumque odio quaerat cupiditate similique in accusamus dolorum
            nobis. Ea, rem fugit. Minima quae magni laboriosam possimus corporis quidem recusandae aspernatur dignissimos
            accusamus adipisci, maiores, tenetur excepturi doloremque eum consequuntur? Expedita possimus sit, vel neque
            fugiat quo ab? Quaerat alias, molestias rerum repudiandae, iste, voluptatem consequatur ex enim tenetur quidem
            expedita, provident vel reiciendis. Ea ipsam suscipit ex ab nulla est, aspernatur nesciunt consequatur cumque
            laudantium. Unde ab earum eius vero obcaecati reiciendis omnis quod culpa harum, modi, possimus molestiae voluptatibus
            beatae, minima ad accusamus quibusdam! Dolor nostrum impedit culpa nemo expedita, numquam dignissimos totam ex
            reprehenderit consectetur neque dicta deserunt, recusandae porro ipsa accusamus maxime soluta eum facilis temporibus
            nesciunt accusantium. Placeat provident facere blanditiis doloremque eos tempora officia doloribus deserunt molestias
            voluptates velit hic, tenetur cupiditate ab. Hic, unde!</p>

        <!-- FIXED BOTTOM -->
        <h3 class="fixed-bottom">Fixed Bottom</h3>

    </div>
    <!-- ./container -->
    <div style="margin-top:500px;"></div>

    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo"
        crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49"
        crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js" integrity="sha384-smHYKdLADwkXOn1EmN1qk/HfnUcbVRZyYmZ4qpPea6sjB/pTJ0euyQp0Mk8ck+5T"
        crossorigin="anonymous"></script>
</body>

</html>